<template>
	<view class="record-body">
		<scroll-view scroll-y="true" :style="{height: recordHeight+'px'}">
			<view class="recordscorll">
				<view class="pannel" v-for="(item,index) in record">
					<view class="applyname">
						<view class="">
							审批人：{{item.teacherName}}
						</view>
						<view class="">
							{{item.createTime}}
						</view>
					</view>
					<view class="">
						<view class="casetype">
							<view class="">
								请假班级：
							</view>
							<view class="">
								{{item.className}}
							</view>

						</view>

					</view>
					<view class="">
						<view class="casetype">
							<view class="">
								请假类型：
							</view>
							<view class="">
								{{item.typeName}}
							</view>

						</view>

					</view>
					<view class="">
						<view class="casetype">
							<view class="">
								开始时间：
							</view>
							<view class="">
								{{item.startTime}}
							</view>

						</view>

					</view>
					<view class="">
						<view class="casetype">
							<view class="">
								结束时间：
							</view>
							<view class="">
								{{item.endTime}}
							</view>

						</view>

					</view>
					<view class="case">
						<view class="">
							请假原因：
						</view>
						<view class="">
							{{item.reason}}
						</view>

					</view>
					<view class="record_process" v-if="item.status===0">
						<image src="../../static/images/class/daishenpi@2x.png" mode=""></image>
						<view class="">
							请假申请待审批
						</view>
					</view>
					<view class="record_process" v-if="item.status===2">
						<image src="../../static/images/class/yipizhun@2x.png" mode=""></image>
						<view class="">
							请假已被批准
						</view>
					</view>
					<view class="refund" v-if="item.status===1">
						<view class="">
							<image class="refund-image" src="../../static/images/class/weitongguo@2x.png" mode=""></image>
						</view>
						<view class="">
							理由不合适，给予驳回处理。如有必要，请详细说明请假原因，并重新提交申请。
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordHeight: '',
				record:''
			}

		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.recordHeight = res.windowHeight - uni.upx2px(0)
					//windoHeight为窗口高度，主要使用的是这个

				}
			})
		},
		onLoad() {
			this.getLeaveApplyLog()
		},
		methods: {
			getLeaveApplyLog(){
				this.$api.getLeaveApplyLog({
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.record = res.data.dataMap.list
					}
				})
			}
		}
	}
</script>

<style scoped>
	.refund {
		display: flex;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.refund>view:nth-child(2) {
		width: 606rpx;
		line-height: 33rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 10rpx;
	}

	.refund-image {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.recordscorll {
		overflow: hidden;
	}

	.record_process {
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		border-top:2rpx solid #EEEEEE;
		margin-top: 10rpx;
	}

	.record_process>image {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.record_process>view {
		margin-left: 12rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		
	}

	.record-body {
		background-color: #F8f8f8;
	}

	.applyname {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.casetype {
		display: flex;
		margin-top: 12rpx;
	}

	.casetype>view:nth-child(1) {
		width: 158rpx;
		line-height: 36rpx;
	}

	.casetype>view:nth-child(2) {
		width: 606rpx;
		line-height: 36rpx;
	}

	.case {
		display: flex;
		margin-top: 16rpx;
	}

	.case>view:nth-child(1) {
		width: 158rpx;
		line-height: 36rpx;
	}

	.case>view:nth-child(2) {
		width: 606rpx;
		line-height: 36rpx;
	}

	.pannel {
		width: 690rpx;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 20rpx 30rpx;
		color: #333333;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
</style>
